import React, { Component } from 'react'

import { SearchBar } from 'antd-mobile'

import { getCity , API } from '../../../utils'

import styles from './index.module.css'

export default class Search extends Component {
  // 当前城市id
  cityId = getCity().value
  // 搜索框防抖定时器id
  timerId = null
  state = {
    // 搜索框的值
    searchTxt: '',
    tipsList: []
  }

  // 传递小区数据给发布房源页面
  handleClick = (item) => {
    // console.log(item);
    this.props.history.replace('/rent/add', {
      name: item.communityName,
      id: item.community
    })
  }

  // 渲染搜索结果列表
  renderTips = () => {
    const { tipsList } = this.state

    return tipsList.map(item => (
      <li key={item.community} className={styles.tip} onClick={ () => this.handleClick(item) }>
        {item.communityName}
      </li>
    ))
  }

  // 关键词搜索
  handleChange = value => {

    this.setState({
      searchTxt: value
    })
    // console.log(value);
    // // 先判断输入框的值是否为空 注意:setState方法是异步的 所以不能用 searchTxt 来判断 要用value
    // if (!value.trim()) {
    //   // 如果文本框的值为空 不要任何请求
    //   this.setState({
    //     tipsList: []
    //   })
    //   return 
    // }
    // 如果不为空，使用API发送请求，获取小区数据
       // 清除上一次的定时器
      clearTimeout(this.timerId)

    this.timerId = setTimeout(async () => {
      if (!value.trim()) {
        // 如果文本框的值为空 不要任何请求
        this.setState({
          tipsList: []
        })
        return 
      }
      console.log(value);
        // 获取小区数据
        const res = await API.get('/area/community', {
          params: {
            name: value,
            id: this.cityId
          }
        })
        this.setState({
          tipsList: res.data.body
        })
      }, 500)
  }

  render() {
    const { history } = this.props
    const { searchTxt } = this.state

    return (
      <div className={styles.root}>
        {/* 搜索框 */}
        <SearchBar
          placeholder="请输入小区或地址"
          value={searchTxt}
          onChange={this.handleChange}
          showCancelButton={true}
          onCancel={() => history.replace('/rent/add')}
        />

        {/* 搜索提示列表 */}
        <ul className={styles.tips}>{this.renderTips()}</ul>
      </div>
    )
  }
}
